<template>
	<div id="collection">
		<!-- 头 -->
		<div class="col-title">
			<div class="title-cont">
				<div class="to-back"><span class="iconfont">&#xe601;</span></div>
				<div class="title-list">
					我的收藏
				</div>
				<div class="to-home"><span class="iconfont">&#xe60c;</span></div>
			</div>
		</div>
		
		<!-- 切换 -->
		<!-- <div class="choose-area">
			<ul>
				<li :class="theType?'chactive':'chnoactive'" @click="chchange(true)">商品</li>
				<li :class="!theType?'chactive':'chnoactive'" @click="chchange(false)">帖子</li>
			</ul>
		</div> -->
		<div class="tuijian-list">
			<template v-if="theType">
				<div class="tuijian-area" v-for="(v,i) in sclistArr">
					<img src="../../../public/01.jpg" alt="">
					<div class="tuijian-name">{{v.proName}}</div>
					<div class="tuijian-price">
						<div class="tj-price">￥{{v.proBprice}}</div>
						<div class="to-car"></div>
					</div>
				</div>
			</template>
			
			<!-- <template v-if="!theType">
				<div class="tuijian-area2">
					<div class="tz-user">
						<img src="../../../public/01.jpg" alt="">
						<span>金牛爱吃psy</span>
					</div>
					<img src="../../../public/01.jpg" alt="">
					<div class="tz-txt">氨基酸的金卡改善计划的可见光司空见惯的吉安市冬季狂欢节噶快介绍啊就是工卡很干净很干净哈萨克给大伙就是给大家嘎斯</div>
					<div class="zan-cang">
						<div class="tz-cang"><span class="iconfont">&#xe658;</span><span class="tz-num">11</span></div>
						<div class="tz-zan"><span class="iconfont">&#xe6bf;</span><span class="tz-num">11</span></div>
					</div>
				</div>
			</template> -->
						
		</div>
	</div>
</template>

<script>
	
	
	export default{
		name:'App',
		data(){
			return{
				theType:true,
				sclistArr:[]
			}
		},
		methods:{
			chchange(n){
				this.theType=n
			}
		},
		mounted(){
				this.axios({
				    method:'get',
				    url:'http://115.28.137.176:8082/collect/seeCollect',
				     // url:'http://115.28.137.176:8082/userLogAndReg/log',
				    // headers:{
				    //   "token":"1111"
				    // },
				    params:{
				        "userId":"3"
						// "nameOrTel":"18892802679",
						// "password":"123456"
				    }
				}).then((res)=>{
					this.sclistArr=res.data.data
				    
				}).catch(()=>{
				    console.log('网络错误')
				});
			    
			
		}
	}
</script>

<style lang="less">
	@font-face {
	  font-family: 'iconfont'; 
	  src: url('../../assets/font/iconfont.eot');
	  src: url('../../assets/font/iconfont.eot?#iefix') format('embedded-opentype'),
	      url('../../assets/font/iconfont.woff2') format('woff2'),
	      url('../../assets/font/iconfont.woff') format('woff'),
	      url('../../assets/font/iconfont.ttf') format('truetype'),
	      url('../../assets/font/iconfont.svg#iconfont') format('svg');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	@baseFontSize:20px;
	@baseSize:20;
	
	.px2rem(@name,@px){
	    @{name}:@px / @baseSize /2 * 1rem;
	}
	
	*{
		margin: 0;
		padding: 0;
	}
	
	html,body{
		height: 100%;
		background: #eeeeee;
	}
	
	.col-title{
		.px2rem(width,750);
		.px2rem(height,90);
		background: #ffffff;
		border-bottom: 1px solid #dddddd;
	}
	.title-cont{
		.px2rem(width,690);
		height:100%;
		.px2rem(line-height,90);
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		.px2rem(font-size,25);
	}
	
	.title-list{
		ul{
			.px2rem(width,260);
			display: flex;
			justify-content: space-between;
			li{
				list-style: none;
			}
		}
	}
	.choose-area{
		.px2rem(width,750);
		.px2rem(height,90);
		background: #ffffff;
		ul{
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: space-around;
			list-style: none;
			li{
				.px2rem(line-height,90);
				.px2rem(font-size,25);
			}
		}
	}
	.tuijian-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.tuijian-area{
		.px2rem(margin-top,10);
		.px2rem(width,373);
		.px2rem(height,500);
		background: #ffffff;
		img{
			.px2rem(width,373);
			.px2rem(height,375);
		}
	}
	.tuijian-name{
		.px2rem(width,353);
		.px2rem(height,70);
		.px2rem(line-height,70);
		margin: 0 auto;
		.px2rem(font-size,25);
		color:#585858;
	}
	.tuijian-price{
		.px2rem(width,353);
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.px2rem(font-size,25);
	}
	.tj-price{
		color: #e73400;
		font-weight: bold;
	}
	.tuijian-area2{
		.px2rem(width,350);
		.px2rem(height,630);
		.px2rem(margin-top,10);
		background: #FFFFFF;
		img{
			.px2rem(width,350);
			.px2rem(height,350);
		}
	}
	.tz-user{
		.px2rem(width,350);
		.px2rem(height,70);
		display: flex;
		align-items: center;
		img{
			.px2rem(width,50);
			.px2rem(height,50);
			.px2rem(border-radius,50);
			.px2rem(margin-left,20);
		}
		span{
			.px2rem(font-size,25);
			.px2rem(margin-left,30);
		}
	}
	.tz-txt{
		.px2rem(height,90);
		.px2rem(padding,10);
		.px2rem(font-size,25);
		overflow: hidden;
	}
	.zan-cang{
		.px2rem(width,350);
		.px2rem(height,70);
		.px2rem(margin-top,20);
		border-top: 1px solid #f1f1f1;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tz-cang{
		color: red;
	}
	.tz-num{
		.px2rem(margin-left,20);
		.px2rem(font-size,25);
		color: #cacaca;
	}
	.chactive{
		color: #eb5527;
	}
	.chanoactive{
		color: #000000;
	}
</style>
